import Vue from 'vue'
import Router from 'vue-router'
// 二级路由
import History from '../pages/about/compontents/History'
import Contact from '../pages/about/compontents/Contact'
import OrderingGuide from '../pages/about/compontents/OrderingGuide'
import Delivery from '../pages/about/compontents/Delivery'
// 三级路由
import Phone from '../pages/about/compontents/contact/Phone'
import PersonName from '../pages/about/compontents/contact/PersonName'

// 路由懒加载只针对一级路由 子路由没必要加载
const Home = () => import('../pages/Home')
const Menu = () => import('../pages/Menu')
const Admin = () => import('../pages/admin/Admin')
const About = () => import('../pages/about/About')
const Login = () => import('../pages/Login')
const Register = () => import('../pages/Register')

Vue.use(Router)

const router = new Router({
//  mode: history, // 需要后台配置支持*/
  routes: [
    {
      path: '*',
      redirect: '/home' // 路由重定向  // 当没有路由地址错误的时候会主动跳转到首页
    },
    {
      path: '/home',
      name: 'Home',
      components: {
        default: Home,
        'orderingGuide': OrderingGuide,
        'delivery': Delivery,
        'history': History
      }
    },
    {
      path: '/menu',
      name: 'Menu',
      component: Menu,
      // 路由独享守卫
      beforeEnter: (to, from, next) => {
        alert('非登录状态，不能访问此页面')
        next() // 可以进入此页面  阻止进入此页面需next(false)
      }
    },
    {
      path: '/admin',
      name: 'Admin',
      component: Admin
    },
    {
      path: '/about',
      name: 'About',
      component: About,
      redirect: '/about/history',
      children: [
        {
          path: 'history',
          name: 'History',
          component: History
        },
        {
          path: 'contact',
          name: 'Contact',
          component: Contact,
          redirect: '/about/contact/phone',
          children: [
            {
              path: 'phone',
              name: 'Phone',
              component: Phone
            },
            {
              path: 'personname',
              name: 'PersonName',
              component: PersonName
            }
          ]
        },
        {
          path: 'orderingGuide',
          name: 'OrderingGuide',
          component: OrderingGuide
        },
        {
          path: 'delivery',
          name: 'Delivery',
          component: Delivery
        }
      ]
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/register',
      name: 'Register',
      component: Register
    }
  ],
  // 滚动行为
  scrollBehavior (to, from, savedPosition) { // scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

// 全局前置守卫  当未登录的时候进行判断   to: 进入路由; from: 离开路由; next: 调用方法
// router.beforeEach((to, from, next) => {
//   // 判断store.getters.isLogin === false
//   // console.log(to)
//   if (to.path === '/login' || to.path === '/register') {
//     next()
//   } else {
//     alert('还没有登录，请先登录！')
//     next('/login')
//   }
// })
// 全局后置守卫钩子 进入页面后就会执行该方法
// router.afterEach((to, from) => {
//   alert(11)
// })
export default router // 最后必须调用下
